<template>
	<view class="view_main">
		<view class="view">
			<image v-if="form.header" :src="this.$.getImg(this.form.header)" @click="selectImg"></image>
			<image v-else src="../../static/header.png" @click="selectImg"></image>
			<input v-model="form.username" placeholder="请输入账号"/>
			<input v-model="form.password" placeholder="请输入密码" type="password"/>
			<input v-model="form.nickname" placeholder="请输入昵称"/>
			<radio-group @change="radioChange">
				<label class="radio"><radio value="0" checked="true" />男</label>
				<label class="radio"><radio value="1" />女</label>
			</radio-group>
			<input v-model="form.email" class="uni-input" placeholder="请输入邮箱"/>
			<button @click="register">注册</button>
			<button @click="back()">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: null,
					password: null,
					nickname: null,
					sex: 0,
					email: null,
					header: null
				}
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			getSex(event) {
				this.from.sex = event.data.sex;
			},
			selectImg() {
				uni.chooseImage({
					count: 1,
					success: (file) => {
						console.log("图片选择成功...", file);
						// 上传图片至服务器
						uni.uploadFile({
						    url: 'http://' + this.$.baseUrl + '/file/uploader',
							name: "file",
							filePath: file.tempFilePaths[0],
						    success: (res) => {
						        console.log(res.data);
								let fileRes = JSON.parse(res.data);
								this.form.header = fileRes.data;
						    }
						});
					}
				});
			},
			register() {
				console.log("进行注册...", this.form);
				this.$.ajax({
					type: "POST",
					url: "/user/register",
					data: this.form,
					success: (res) => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
				});
			},
			radioChange(event){
				this.form.sex = event.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.view_main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.view {
			margin-top: 160rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			
			image {
				width: 250rpx;
				height: 250rpx;
				border-radius: 125rpx;
				margin-bottom: 30rpx;
			}
			input {
				margin-top: 30rpx;
				width: 70%;
				border-bottom: 1px solid #ddd;
				padding: 20rpx 30rpx;
			}
			
			button {
				width: 70%;
				margin-top: 30rpx;
				background-color: #00A2FF;
				color: white;
				box-shadow: 10rpx 10rpx 10rpx gray;
			}
			
			button:active {
				position: relative;
				top: 5rpx;
				left: 5rpx;
				box-shadow: 5rpx 5rpx 5rpx gray;
			}
			
			radio-group {
				margin-top: 30rpx;
				
				.radio{
					margin-right: 40rpx;
				}
			}
		}
	}
</style>
